import {
  Button,
  Form,
  FormItem,
  Input,
  InputNumber,
  Modal,
  Select,
  Space,
  Spin
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'

import qzyApi from '@/apis/qzyApi'
import type { UserManageListItem } from '@/apis/userTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'

export default defineComponent({
  name: 'QzyClassificationManagement',
  setup() {
    const loading = ref(false)
    const visible = ref(false)
    const deleteVisible = ref(false)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          perfect: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'records',
            total: 'total'
          },
          ajax: {
            query: async ({ page, form }) => {
              loading.value = true
              const data = await qzyApi.getQzyUserList({
                pageSize: page.pageSize,
                pageNo: page.currentPage,
                ...form
              })
              loading.value = false
              return data
            }
          }
        },
        formConfig: {
          items: [
            {
              field: 'content',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '分类',
                  style: {
                    width: '200px'
                  }
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '分类名',
            field: 'weightLoss'
          },
          {
            title: '关联内容数',
            field: 'clockFrequencyOfThisMonth'
          },
          {
            title: '创建时间',
            field: 'createTime',
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '素材/照片',
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })

    //删除
    function handleDelete(id) {
      deleteVisible.value = true
    }
    function handleDeleteOk() {
      deleteVisible.value = false
    }
    //新增
    function handleCreate() {
      visible.value = true
    }
    function handleCreateOk() {
      visible.value = false
    }
    return {
      visible,
      tableRef,
      tableConfig,
      loading,
      deleteVisible,
      handleCreateOk,
      handleDeleteOk,
      handleCreate,
      handleDelete
    }
  },
  render() {
    return (
      <div>
        <Spin spinning={this.loading}>
          <ProTable
            ref="tableRef"
            v-slots={{
              toolbarButtons: () => {
                return (
                  <Space>
                    <Button
                      style={{ position: 'absolute', left: '10px', top: '5px' }}
                      type="primary"
                      onClick={this.handleCreate}
                    >
                      新增
                    </Button>
                  </Space>
                )
              },
              operation: ({ row }) => (
                <div>
                  <Button
                    type="link"
                    size="small"
                    onClick={() => this.handleDelete(row.id)}
                  >
                    删除
                  </Button>
                </div>
              )
            }}
            {...this.tableConfig}
          />
        </Spin>
        <Modal
          v-model:visible={this.deleteVisible}
          title="删除"
          destroyOnClose
          onOk={this.handleDeleteOk}
          width={350}
        >
          确定删除该项吗？
        </Modal>
        <Modal
          v-model:visible={this.visible}
          title="新增分类"
          destroyOnClose
          onOk={this.handleCreateOk}
          width={420}
        >
          <Form labelCol={{ span: 5 }}>
            <FormItem label={'分类名称:'}>
              <Input placeholder={'请输入分类名称'}></Input>
            </FormItem>
            <FormItem label={'上级分类：'}>
              <Select placeholder={'请选择'}></Select>
            </FormItem>
            <FormItem label={'显示顺序'}>
              <InputNumber placeholder={'输入'} min={0}></InputNumber>
              <span style={{ color: '#aaaaaa', marginLeft: '10px' }}>
                数值越大越靠前
              </span>
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
